<template>
  <div>
    <div class="search-content">
      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">下单时间：</span>
        <el-date-picker
          v-model="searchContent.addTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable 
        >
        </el-date-picker>
      </div>
      <div class="putaway-time-wrapper supplier_search">
        <span class="putaway-time-label">供应商：</span>
        <el-input
            v-model="searchContent.supplier"
            @click.native="searchSupplier"
            placeholder="请选择"
            readonly
        ></el-input>
      </div>
      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">状态：</span>
        <el-select v-model="searchContent.status" multiple collapse-tags clearable>
            <el-option v-for="item in status" :key="item.value" :value="item.value" :label="item.label"></el-option>
        </el-select>
      </div>
      <el-button type="primary" @click="getList" style="margin-left: 10px">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <div class="search-list">
        <el-table
            :data="list"
            border
            height="calc(100vh - 16rem)"
            style="width: 100%">
            <el-table-column prop="pgoods_business_txt" align="center" label="供应商" ></el-table-column>
            <el-table-column prop="totalNum" align="center" label="订单总量" ></el-table-column>
            <el-table-column prop="point_pointnum" align="center" label="积分支付总额">
                <template slot-scope="scope">
                    <span>{{ scope.row.point_pointnum / 100}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="point_paynum" align="center" label="现金支付总额" ></el-table-column>
            <el-table-column prop="point_comprice_all" align="center" label="协议价总额" ></el-table-column>
        </el-table>
        <div class="paging">
            <el-button type="primary" size="mini" @click="exportFile">导出</el-button>
        </div>
    </div>
    <el-dialog
        title="供应商选择"
        :visible.sync="supplierVisible"
        :before-close="closeDia"
        width="80%"
        >
        <div class="suoolier_box">
            <div class="stores">
            <div class="stores_search">
                <el-input v-model="supplierSearch.storeName"></el-input>
                <el-button type="primary" @click="searchSupplier1">搜索</el-button>
                <el-button type="primary" @click="resetSupplier">重置</el-button>
            </div>
            <el-table 
             :data="supplier_options"
            border
            height="450"
            style="width: 100%"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :row-key="getRowKeys"
            >
                <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
                <el-table-column prop="store_name" align="center" label="店铺名" ></el-table-column>
                <el-table-column prop="member_name" align="center" label="店主名" width="180"></el-table-column>
                <el-table-column prop="store_name" align="center" label="状态" width="100">
                    <template slot-scope="scope">{{storeStatus(scope.row.store_state)}}</template>
                </el-table-column>
            </el-table>
            <div>
                <el-pagination
                    small
                    layout="prev, pager, next"
                     @current-change="handleCurrentChange"
                      :current-page="supplierSearch.page"
                    :total="supplierSearch.total">
                </el-pagination>
            </div>
        </div>
        <div class="choose_stores">
            <h3>已选供应商</h3>
             <el-table 
             :data="chooseSupplier"
            border
            height="450"
            style="width: 100%"
            >
                <el-table-column prop="store_name" align="center" label="店铺名"></el-table-column>
                <el-table-column prop="member_name" align="center" label="店主名" width="180"></el-table-column>
                <el-table-column prop="store_name" align="center" label="状态" width="100">
                    <template slot-scope="scope">{{storeStatus(scope.row.store_state)}}</template>
                </el-table-column>
            </el-table>
        </div>
        </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="closeDia">取 消</el-button>
            <el-button type="primary" @click="supplierVisible = false">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
export default {
  data() {
    return {
      options: [],
        oHeight: 800,
        supplier_options: [],//供应商
        supplierVisible: false,
        supplierSearch: {
            page: 1,
            eachNum: 10,
            storeName: "",
            total:0
        },
        chooseSupplier:[],
        props: {
            checkStrictly:true,
            value: "category_id",
            label: "category_name",
            children:"child"
        },
        status: [
            {value: '40', label: "已完成"},
            {value: '20', label: "已支付"},
            {value: '30,60', label: "已发货"},
        ],
        searchContent: {
            addTime: [],
            supplier:"",
            status:[],
            
        },
        list: [],
    };
  },
  created() {
    this.getTime();
  },

  methods: {
      getTime() {
        let now = new Date();
        let targetday = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30);
        this.searchContent.addTime = [String(targetday), String(now)]
        this.getList();
      },
      getList() {
          let data = {};
          data.start_time = new Date(this.searchContent.addTime[0]).getTime() / 1000;
          data.end_time = new Date(this.searchContent.addTime[1]).getTime() / 1000;
          //供应商
           if (this.chooseSupplier.length > 0) {
            let pgoods_business = ""
            this.chooseSupplier.map(v => {
                pgoods_business += v.store_id + ','
            })
            data.pgoods_business = pgoods_business.slice(0,-1)
          }
          //状态
          if (this.searchContent.status.length > 0) {
            let point_orderstate = ""
            this.searchContent.status.map(v => {
                point_orderstate += v + ','
            })
            data.point_orderstate = point_orderstate.slice(0,-1)
          }
            this.$http.get(`/admin/store/index.php?act=storeStatics&op=supplierStatics`,{params:data}).then(res => {
            if (res.code === 1) {
                this.list = res.data
                } else {
                    this._message('error', err);
                }

            }).catch(err => {
                this._message('error', err);
            })
      },
      resetSearchData() {
        let now = new Date();
        let targetday = new Date(now.getTime() - 1000 * 60 * 60 * 24 * 30);
        this.searchContent.addTime = [String(targetday), String(now)];
          this.searchContent.status = [];
          this.searchContent.supplier = "";
          this.chooseSupplier = [];
        this.getList()
      },
      searchSupplier() {
          this.supplierVisible = true;
          this.tosearchSupplier();
      },
      searchSupplier1() {
          this.supplierSearch.page = 1;
          this.tosearchSupplier();
      },
      resetSupplier() {
          this.supplierSearch.page = 1;
          this.supplierSearch.eachNum = 10;
          this.supplierSearch.storeName = "";
          this.tosearchSupplier();
      },
      tosearchSupplier() {
          let data = {
              page: this.supplierSearch.page,
              eachNum: this.supplierSearch.eachNum,
            storeName:this.supplierSearch.storeName
        }
          this.$http.post(`/admin/store/index.php?act=storeManage&op=getStoreList`,data).then(res => {
            if (res.code === 1) {
                this.supplier_options = res.data.list
                this.supplierSearch.total = Number(res.data.totalNum) || 0
                } else {
                    this._message('error', err);
                }
            }).catch(err => {
                this._message('error', err);
            })
      },
      handleCurrentChange(val) {
          this.supplierSearch.page = val;
          this.tosearchSupplier()
      },
      getRowKeys(row) {
        return row.store_id
      },
      handleSelectionChange(val) {
          this.chooseSupplier = val;
          let str = "";
          this.chooseSupplier.map(v => {
              str += v.store_name + " ";
          })
          this.searchContent.supplier = str;
      },
      closeDia() {
          this.resetSupplier();
           this.$refs.multipleTable.clearSelection();
          this.chooseSupplier = [];
          let str = "";
          this.chooseSupplier.map(v => {
              str += v.store_name + " ";
          })
          this.searchContent.supplier = str;
          this.supplierVisible = false;
      },
      storeStatus(status) {
         switch (status) {
                    case '0':
                        return "关闭";
                    case '1':
                        return "开启";
                }
      },
      exportFile() {
           let data = {};
          data.start_time = new Date(this.searchContent.addTime[0]).getTime() / 1000;
          data.end_time = new Date(this.searchContent.addTime[1]).getTime() / 1000;
            //供应商
           if (this.chooseSupplier.length > 0) {
            let pgoods_business = ""
            this.chooseSupplier.map(v => {
                pgoods_business += v.store_id + ','
            })
            data.pgoods_business = pgoods_business.slice(0,-1)
          }
          //状态
          if (this.searchContent.status.length > 0) {
            let point_orderstate = ""
            this.searchContent.status.map(v => {
                point_orderstate += v + ','
            })
            data.point_orderstate = point_orderstate.slice(0,-1)
          }
         var host;
      if (this.$store.state.isServer) {
        host = location.host.replace("admin", "api");
      } else {
        host = location.host + "/api";
      }
      var url =
        location.protocol +
        "//" +
        host +
        "/admin/store/index.php?act=storeStatics&op=supplierStatics&exportData=1";
      for (var key in data) {
        if (
          !(
            data[key] === null ||
            data[key] === "" ||
            data[key] === undefined
          )
        ) {
          url += "&" + key + "=" + data[key];
        }
      }
      window.location.href = url;
    },
  },
  mounted() {
    resize(this);
  },
};
</script>
<style lang="scss" scoped>
.search-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &-input {
    width: 200px;
  }
 
  .putaway-time-wrapper {
    .putaway-time-label {
      font-size: 14px;
    }
    display: flex;
    align-items: center;
    /deep/.el-range-separator {
      box-sizing: content-box;
    }
  }
}
.table_tit{
    margin-bottom: 10px;
    span{
        color: #54a7e1;
    }
}
.paging{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10px;
}
.suoolier_box {
    display: flex;
}
.stores {
    width: 50%;
    border-right: 1px solid #ccc ;
    .stores_search {
        display: flex;
        .el-input{
            width: 70%;
            margin-right: 10px;
        }
    }
    .el-table {
        margin: 10px 0;
    }
}
.choose_stores{
    width: 50%;
    margin: 10px 0;
    h3{
        font-size: 18px;
        margin: 1px 10px;
    }
}
.supplier_search {
    span {
        width: 60px;
    }
    .el-input {
        width: 180px;
    }
}
</style>